<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link href="/lib/layui-v2.6.3/css/layui.css" rel="stylesheet">
    <style>
        .layui-table-cell{
            text-align:center;
            height: auto;
            white-space: normal;
        }
    </style>
</head>
<body>
<div class="layuimini-main">
    <fieldset class="table-search-fieldset">
        <legend>搜索信息</legend>
        <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户姓名</label>
                        <div class="layui-input-inline">
                            <input id="input1" type="text" name="username" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户性别</label>
                        <div class="layui-input-inline">
                            <input type="text" id="input2" name="sex" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <input id="searchBtn" type="button" value="搜索" class="layui-btn">
                        <input id="addBtn" type="button" value="添加用户" class="layui-btn">
                    </div>
                </div>
            </form>
        </div>
    </fieldset>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
            <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
        </div>
    </script>
</div>
<table id="userTable"  lay-filter="table1"></table>

<script type="text/html" id=operateTemplate>

    <input type="button" class="layui-btn layui-btn-xs" value="编辑" lay-event="edit">
    <input type="button" class="layui-btn layui-btn-xs layui-btn-danger" value="删除" lay-event="del">
    <input type="button" class="layui-btn layui-btn-xs layui-btn-danger" value="重置密码" lay-event="chongzhi">
</script>
<script id="userTemplate" type="text/html">
    <form class="layui-form" lay-filter="userForm">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="hidden" name="id"/>
                <input type="hidden" name="action" value="save"/>
                <input type="text" name="username" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" placeholder="请输入昵称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" id="password" autocomplete="off" placeholder="请输入密码"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" autocomplete="off" placeholder="请输入手机号" class="layui-input">
            </div>
        </div>
        <!--<div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-inline">
                <button id="avatar" type="button" class="layui-btn" >浏览</button>
                <input type="text" id="aaaa" name="avatar" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传头像</button>

                <div style="margin: 10px 10px 10px 110px" class="layui-upload-list">
                    <img width="95px" height="95px" class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px; margin: 10px 10px 10px 110px;" >
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
                <input type="hidden" id="aaaa" name="avatar" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="saveBtn" type="button" class="layui-btn" >立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

</script>

<script src="/lib/layui-v2.6.3/layui.js"></script>
<script src="/js/lay-config.js"></script>
<script th:inline="none" type="text/javascript">

    layui.use(["table", "layer", "laydate", "form","upload","common","element"], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.form;
        var upload=layui.upload;
        var element=layui.element;

        $("#addBtn").on("click", function () {
            layer.open({
                type: 1,
                area: ["400px", "320px"],
                title: "新增用户",
                content: $("#userTemplate").html()
            });
            form.render();
            /*upload.render({
                elem:"#avatar",
                url: "/user/avatar",
                done:function (data){
                    $("#aaaa").val(data.data.avatar);
                }
            });*/
            var uploadInst = upload.render({
                elem: '#test1'
                ,url: '/user/avatar' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });

                    element.progress('demo', '0%'); //进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }
                    //上传成功的一些操作

                    $("#aaaa").val(res.data.avatar);

                    //……
                    $('#demoText').html(''); //置空上传失败的状态
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
                //进度条
                ,progress: function(n, elem, e){
                    element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                    if(n == 100){
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });
        });
        
        $("body").on("click", "#saveBtn", function () {
            var data = form.val("userForm");
            //console.log(data);
            if(data.username==null||data.username==""){
                layer.msg("用户名不能为空");
                return false;
            };
            $.post("/user/save", data, function (result) {
                if(result.code==0){
                    layer.closeAll();
                    layer.msg(result.msg);
                    $("#searchBtn").click();
                }else{
                    layer.closeAll();
                    layer.msg(result.msg);
                }
            });
        });
        $("#searchBtn").on("click", function () {
            table.render({
                elem: "#userTable",
                toolbar: '#toolbarDemo',
                url: "/user/list",
                /*done: function(res, curr, count){
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    console.log(res);

                    //得到当前页码
                    console.log(curr);

                    //得到数据总量
                    console.log(count);
                },*/
                where: {keyword: $("#input1").val(), sex: $("#input2").val()},
                cols: [ [
                    {type: "checkbox", width: 50},
                    {
                        title: "头像",
                        field: "avatar",
                        templet:function (d) {
                            // console.log(d.avatar)
                            if (d.avatar!=null){
                                return '<img src="'+d.avatar+'" style="height: 50px;width: 50px"/>'
                            }else {
                                return '<img src="" style="height: 50px;width: 50px"/>'
                            }
                        },
                        align: "center"
                    },
                    {
                        title: "ID",
                        field: "id"
                    }, {
                        title: "昵称",
                        field: "name"
                    }, {
                        title: "用户名",
                        field: "username"
                    },/* {
                        title: "密码",
                        field: "password"
                    },*/{
                        title: "性别",
                        field: "sex"
                    },{
                        title: "手机号",
                        field: "phone"
                    },
                    {title: '操作', toolbar: '#operateTemplate', align: "center"}
                ] ],
                page: true,
                limit:5,
                limits: [5, 10, 15, 20],
                skin: 'line'
            });
        });
        //用代码点了一下搜索
        $("#searchBtn").click();

        table.on('toolbar(table1)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                layer.open({
                    type: 1,
                    area: ["400px", "320px"],
                    title: "新增用户",
                    content: $("#userTemplate").html()
                });
                upload.render({
                    elem:"#avatar",
                    url: "/user/avatar",
                    done:function (data){
                        $("#aaaa").val(data.data.avatar);
                    }
                })
                form.render();
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('userTable')
                    ,data = checkStatus.data;
                var ids=[];
                $.each(data,function(i,v) {
                    ids[i]=v.id;
                });
                console.log(ids);
                $.post("/user/deletes", {ids:ids}, function () {
                    layer.closeAll();
                    $("#searchBtn").click();
                });
            }
        });

        /*table.on('checkbox(table1)', function (obj) {
            console.log(obj)
        });*/


        table.on("tool(table1)", function (obj) {
            if (obj.event == "edit") {
                $.get("/user/selectById?id=" + obj.data.id, function (m) {
                    /*console.log(m);
                    console.log("1111");*/
                    if (m.code == 0) {
                        layer.open({
                            type: 1,
                            area: ["400px", "320px"],
                            title: "编辑用户",
                            content: $("#userTemplate").html()
                        });
                        var uploadInst = upload.render({
                            elem: '#test1'
                            ,url: '/user/avatar' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                            ,before: function(obj){
                                //预读本地文件示例，不支持ie8
                                obj.preview(function(index, file, result){
                                    $('#demo1').attr('src', result); //图片链接（base64）
                                });

                                element.progress('demo', '0%'); //进度条复位
                                layer.msg('上传中', {icon: 16, time: 0});
                            }
                            ,done: function(res){
                                //如果上传失败
                                if(res.code > 0){
                                    return layer.msg('上传失败');
                                }
                                //上传成功的一些操作

                                $("#aaaa").val(res.data.avatar);

                                //……
                                $('#demoText').html(''); //置空上传失败的状态
                            }
                            ,error: function(){
                                //演示失败状态，并实现重传
                                var demoText = $('#demoText');
                                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                                demoText.find('.demo-reload').on('click', function(){
                                    uploadInst.upload();
                                });
                            }
                            //进度条
                            ,progress: function(n, elem, e){
                                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                                if(n == 100){
                                    layer.msg('上传完毕', {icon: 1});
                                }
                            }
                        });

                        form.val("userForm", m.data);
                        $("#password").attr("disabled",true);
                        $("#demo1").attr("src",m.data.avatar)
                    } else {
                        layer.msg(m.msg);
                    }
                });
            }

            if (obj.event == "del") {
                layer.confirm("您确定要删除此用户吗？", function () {
                    $.post("/user/delete", {id:obj.data.id}, function () {
                        layer.closeAll();
                        $("#searchBtn").click();
                    });
                });
            }
            if (obj.event == "chongzhi") {
                layer.confirm("您确定要重置此用户密码吗？", function () {
                    $.post("/user/updateMima", {id:obj.data.id}, function (m) {

                        layer.closeAll();
                        layer.msg(m.msg);
                        $("#searchBtn").click();
                    });
                });
            }
        })
    });
</script>
</body>
</html>